<template>
<div>
  <span v-if="$route.path == '/cameraPlay'||$route.path == '/videoRecord'" class="screenfull" @click="clickFullscreen">
    <img v-if="!isFullscreen" src="~assets/img/full_cameraPlay.png"/>
    <img v-else src="~assets/img/exit_cameraPlay.png"/>
  </span>
  <span v-else class="screenfull" @click="clickFullscreen">
    <img v-if="!isFullscreen" src="~assets/img/full.png"/>
    <img v-else src="~assets/img/exit.png"/>
  </span>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  name: "Screenfull",
  data() {
    return {
      isFullscreen: false
    };
  },
  methods: {
    clickFullscreen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
      this.isFullscreen = !this.isFullscreen
    }
  }
};
</script>
<style>
  .screenfull {
    color: #000;
    margin: 0 20px;
    cursor: pointer;
  }
  .screenfull img{
    width: 20px;
    height: 20px;
  }
</style>
